import { toStringTypeCheck } from '../../../Func/uniFunc/Func/toStringTypeCheck';
import { addEvent } from '../../Event/Func/add_remove_eventListen';
import { packNode } from '../../Func';

const domTree_infoTag = 'domTree_info';

class domTree_info {
  get [Symbol.toStringTag]() {
    return domTree_infoTag;
  }

  /**
   * 根据 domT 的 对象 生成 domTree_info . growthDom 生成 元素
   * @param {domTree_info} domT
   */
  constructor(domT) {
    Object.assign(this, domT);
  }

  /**
   * @type {string[]} 多 子节点
   */
  queue;

  /**
   * @type {HTMLElementTagNameMap} 元素 标签类型
   */
  tag;

  /**
   * @type {HTMLElementEventMap[] | HTMLElementEventMap} 元素 事件 集
   */
  events;

  /**
   * @type {string[] | string} 元素 属性 集
   */
  attriKey;

  /**
   * 直绑定 或 处理 class
   * @type {string[] | string}
   */
  class;

  /**
   * 值 绑定 element.key = val
   * @type {string[]}
   */
  prop;

  //   /**
  //    * for 循环 当前 元素
  //    */
  //   direct_for;

  //   /**
  //    * if 根据 给定值 判定 是否 添加 该 元素
  //    */
  //   direct_if;

  /**
   * 生成 当前层 的 元素
   * @returns {HTMLElement | HTMLElement[] | null}
   */
  growthDom() {
    // if (this.direct_for != undefined) {
    //   return direct_for_impact(this);
    // }

    // if (!direct_if_impact(this)) {
    //   return null;
    // }

    let retEl;

    /**
     * 如果 没有 标记 tag
     */
    if (this.tag == undefined) {
      return null;
    }

    /**
     * 创建 元素
     */
    retEl = document.createElement(this.tag);

    /**
     * 子节点
     */
    if (this.queue != undefined && toStringTypeCheck(this.queue, 'array')) {
      for (const key of this.queue) {
        let childNth = new domTree_info(this[key]);
        packNode(retEl, childNth.growthDom());
      }
    }

    /**
     * 对 当前 元素 添加 简单 的 属性 事件
     */
    for (const key in growth_empty_operate) {
      const cb = growth_empty_operate[key];
      cb(retEl, this);
    }

    return retEl;
  }
}

let growth_empty_operate = {
  class: add_class,
  prop: bind_key,
  attriKey: add_attriKeys,
  events: add_events,
};

/**
 * 给 元素 添加 特定 属性
 * @param {HTMLElement} element 指定元素
 * @param {domTree_info} that
 */
function add_class(element, that) {
  if (that.class == undefined) {
    return;
  }
  element.classList.add(...that['class']);
}

/**
 * 给 元素 添加 事件
 * @param {HTMLElement} element 指定元素
 * @param {domTree_info} that
 */
function add_events(element, that) {
  if (that.events == undefined) {
    return;
  }
  for (const eventKey of that.events) {
    let fnArr = that[eventKey];
    if (toStringTypeCheck(fnArr, 'function')) {
      fnArr = [fnArr];
    }
    for (const unit_fn of fnArr) {
      addEvent(element, eventKey, unit_fn);
    }
  }
}

/**
 * 给 元素 添加 属性
 * @param {HTMLElement} element 指定元素
 * @param {domTree_info} that
 */
function add_attriKeys(element, that) {
  if (that.attriKey == undefined) {
    return;
  }
  for (const attriKey of that.attriKey) {
    // element[attriKey] = that[attriKey];
    element.setAttribute(attriKey, that[attriKey]);
  }
}

function bind_key(element, that) {
  if (that.prop == undefined) {
    return;
  }
  for (const bind_key of that.prop) {
    element[bind_key] = that[bind_key];
  }
}

// /**
//  * 实现 if 判定
//  * @param {domTree_info} that
//  * @returns {Boolean}
//  */
// function direct_if_impact(that) {
//   return true;
// }

// /**
//  * 实现 for 循环
//  * @param {domTree_info} that
//  * @returns {HTMLElement[]}
//  */
// function direct_for_impact(that) {
//   return false;
// }

export { domTree_info };
